<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box">
            <div class="growth-rules-main">
                <div class="content">
                    <div class="top_card">
                        <div class="top_card_name">成长规则</div>
                    </div>
                    <div class="form_card">
                        <el-form ref="formRef" :model="form">
                            <div class="form_item_box">
                                <el-form-item label-width="0">
                                    <el-checkbox
                                        v-model="form.rule_switch"
                                        :true-label="1"
                                        :false-label="2"
                                        @change="onCheckboxChange" />
                                </el-form-item>
                                <el-form-item label="每消费" prop="money" :rules="rules.required">
                                    <el-input-number
                                        v-model="form.money"
                                        class="input_width_90"
                                        :min="1"
                                        :max="99999"
                                        :precision="0"
                                        :controls="false"
                                        placeholder="请输入"
                                        :disabled="form.rule_switch === 2" />
                                </el-form-item>
                                <el-form-item label="元，获得" prop="experience" :rules="rules.required">
                                    <el-input-number
                                        v-model="form.experience"
                                        class="input_width_90"
                                        :min="1"
                                        :max="99999"
                                        :precision="0"
                                        :controls="false"
                                        placeholder="请输入"
                                        :disabled="form.rule_switch === 2" />
                                </el-form-item>
                                <el-form-item label="成长值"></el-form-item>
                            </div>
                        </el-form>
                        <div class="desc">
                            订单确认收货后，立即发放成长值。按照订单商品实付金额计算成长值，不包含运费部分。
                        </div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <el-button v-auth="'EDIT_SAVE'" type="primary" @click="onSubmit(formRef)">保存</el-button>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { getGrowthDetail, saveGrowthDetail } from '@/api/member/memberLevel/index';

const router = useRouter();
const route = useRoute();

const formRef = ref<any>(null);

const form = reactive<any>({
    rule_switch: 1,
    money: null,
    experience: null
});

const rules = reactive({
    required: [{ required: true, message: '该字段必填', trigger: 'blur' }]
});

const onCheckboxChange = (v: any) => {
    // rules.required[0].required = v === 1;
    // if (v === 2) {
    //   form.money = null;
    //   form.experience = null;
    // }
};

const onSubmit = async (formEl: any) => {
    formEl.validate(async (res: any) => {
        if (res) {
            const params = {
                rule_switch: form.rule_switch,
                money: form.money || 0,
                experience: form.experience || 0
            };
            const res = await saveGrowthDetail(params);
            ElMessage.success('保存成功');
        }
    });
};

const initData = async () => {
    const res = await getGrowthDetail({});
    form.rule_switch = res.rule_switch;
    form.money = res.money;
    form.experience = res.experience;
};

onMounted(() => {
    initData();
});
</script>
<style lang="scss" scoped>
.growth-rules-main {
    padding: 24px;

    .top_card {
        display: flex;
        align-items: center;
        padding-bottom: 25px;
        background-color: #fff;

        &::before {
            display: inline-block;
            width: 4px;
            height: 16px;
            content: '';
            background: #ff6b00;
        }

        .top_card_name {
            margin-right: 9px;
            margin-left: 6px;
            color: #33302d;
            font-size: 16px;
            font-weight: 500;
        }
    }

    .input_width_90 {
        width: 90px;
    }

    :deep(.el-input-number) {
        .el-input {
            .el-input__wrapper {
                .el-input__inner {
                    text-align: left;
                }
            }
        }
    }

    .form_card {
        flex: 1;
        background-color: #fff;

        .el-form {
            .form_item_box {
                display: flex;
                align-items: center;

                :deep(.el-form-item) {
                    margin-bottom: 12px;

                    .el-form-item__label {
                        padding: 0 4px;

                        &::before {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    .desc {
        color: #969696;
        font-size: 14px;
        line-height: 20px;
    }

    .footer {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
